<template>
	<div class="generalize-caption" @click="goTo">
		<img class="left-img" :src="`${params.imgUrl}?x-oss-process=image/resize,m_fill,h_195,w_324`" alt mode="aspectFill" />
		<div class="right-tit">
			<h3>{{ params.title || '' }}</h3>
			<div class="right">
				<div class="des" v-if="!$util.isEmpty(params.cat_name)">{{ params.cat_name }}</div>
				<div class="des">
					<span>{{ params.extension_num }}人分享&nbsp; |&nbsp;获客{{ params.huoke_num }}人</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'itemLink',
	props: {
		params: {
			type: Object,
			default: () => {}
		}
	},
	methods: {
		goTo() {
			this.$emit('goTo')
		}
	}
}
</script>

<style lang="scss" scoped>
	.generalize-caption {
		background-color: #f5f5f5;
		height: 200px ;
		display: flex;
		align-items: center;
		margin: 20px;
		& .left-img {
			width: 238px;
			height: 142px;
			padding-left: 18px;
		}
		& .right-tit {
			height: 140px;
			padding-left: 22px;
			padding-right: 22px;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			h3 {
				color: #333333;
				font-size: 26px;
				font-weight: 400;
				line-height: 36px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
				max-width: 465px;
			}
			& .des {
				color: #999999;
				font-size: 24px;
				font-weight: 400;
				&:nth-of-type(1) {
					margin: 18px 0 9px;
				}
			}
		}
	}
</style>
